<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息展示</title>

    <link rel="shortcut icon" href="/imgs/head.ico"/>
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .el-header, .el-footer {
            background-color: #545c64;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            /*line-height: 200px;*/
        }


    </style>
</head>
<body>
<div id="app">
    <h1 align="center">个人中心</h1>
    <template>
        <el-button type="primary" size="small" @click="handleEdit()"
                   style="margin-right: 0px;position: fixed;right: 40px;">修改资料</el-button>
        <el-descriptions class="margin-top" title="个人资料" :column="3" :size="size" border>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    真实姓名
                </template>
                {{tableData.name}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    性别
                </template>
                {{tableData.sex}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    生日
                </template>
                {{tableData.birthday}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    电话号码
                </template>
                {{tableData.mobile}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    邮箱
                </template>
                {{tableData.email}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    qq
                </template>
                {{tableData.qq}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    证件号
                </template>
                {{tableData.zjno}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    创建时间
                </template>
                {{tableData.cjtime}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    修改时间
                </template>
                {{tableData.gxtime}}
            </el-descriptions-item>
        </el-descriptions>
    </template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.sex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生日" :label-width="formLabelWidth">
                <el-input v-model="form.birthday" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth">
                <el-input v-model="form.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="qq" :label-width="formLabelWidth">
                <el-input v-model="form.qq" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证件号" :label-width="formLabelWidth">
                <el-input v-model="form.zjno" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                circleUrl: "https://ljblist.oss-cn-hangzhou.aliyuncs.com/c1760712-53ee-4da6-8716-c35046d1fcd7.jpg",
                sizeList: ["large"],
                tableData: {},
                form: {},
                title:"修改资料",
                dialogFormVisible:false
            };
        },
        created: function () {//页面初始化时,需要执行的业务可以放入该方法
            this.loadData();
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            loadData() {
                let _this = this;
                //使用axios向后台发请求
                axios.get('/tuser/tick')
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.tableData=response.data.data
                            // alert(JSON.stringify(_this.tableData))
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            handleEdit(index, row) {
                this.dialogFormVisible = true;
                this.form = this.tableData;
            },
            addUser(){
                let _this = this;
                axios.put("/tuser/update",
                    this.form)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.$message({
                                message: '成功',
                                type: 'success'
                            });
                            _this.dialogFormVisible = false;
                        }
                    })
                    .catch(function (error) {
                        _this.$message.error('错误');
                    });
            }
        }
    })
</script>
</html>